<template>
  <div>
    <Hearder></Hearder>
    <div id="app_main" style="background-color: #F5F6F7;text-align: left;">
      <div class="container view">

        <!--左侧选择栏-->
        <div class="left_box" :style="{'position':btnFlag?'fixed':'','top':btnFlag?'47px':''}">
          <ul class="aside">
            <li v-for="(item,index) in activeTab" :key="index"
                :class="[item.path==$route.path?'list router-link-active':'list']"
            >
              <router-link :to="item.path" class="zl">{{ item.title }}</router-link>
            </li>
          </ul>
        </div>

        <!--右侧内容-->
        <router-view :key="key"></router-view>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { listMessage, getMessage } from '@/api/message'
import Footer from '@/layout/components/Footer'
import Hearder from '@/components/Hearder'

export default {
  name: 'Message',
  components: { Footer, Hearder },
  inject: ['reload'],  //注入依赖
  data() {
    return {
      activeTab: [
        { path: '/message/comment', title: '评论' },
        { path: '/message/notify', title: '消息通知' }

      ],
      btnFlag: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scrollToTop, true)
  },
  computed: {
    key() {
      return this.$route.path
    }
  },
  created() {
    // this.getMessageInfo()
  },
  methods: {
    scrollToTop() {
      const that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 47) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    },

    //获取消息
    getMessageInfo() {
      let queryParams = {
        readStatus: '0',
        status: '0',
        toId: this.user.userId
      }
      listMessage(queryParams).then(response => {

        }
      )
    },
  },
  destroyed() {
    // 离开页面时需销毁滚动监听事件
    window.removeEventListener('scroll', this.scrollToTop)
  }
}
</script>

<style scoped lang="scss">
#app_main {

  .container {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 1200px;
    margin: 0 auto;
    margin-top: 12px;
  }

}
</style>
